<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover">
    <title>语中冒险</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" integrity="sha256-G3IAYJYIQvZgPksNQDbjvxd/Ca1SfCDFwu2s2lt0oGo=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
    <!-- User 'Log-In' area -->
    <div id = "loginArea">
        <div class="logo"></div>
        <form id="loginForm">
            <p id="loginMessage" >你是谁?</p>
            <input class="inputArea1" id="nickname" autocomplete="off"/> <br /> <br /> <br />
            <input type="submit" class="button" value="加入"  />
        </form>
    </div>

    <!-- User Message Area -->
    <div id = "chatroomArea" class="whole">
        <div class="header">
            <h3 style="margin-top:7px;">《语中冒险》 当前玩家数:<span id="player_cnt">1</span> </h3>
        </div>

        <div class="content">
            <div class="container" style="height:100%">
                <div class="row" style="height:100%">
                    <div class="col-10" id="chat">
                    </div>
                    <div class="col-2">
                        <input class="slider" data-slider-handle="custom" type="range" orient="vertical" id="slider" min="1" max="100" value="50" >
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-8">
                        <form class="customForm" id="messageForm">
                            <textarea class="inputArea2" rows ="2" id="message"></textarea>
                        </form>
                    </div>
                    <div class="col-4">
                        <button type="button" class="btn btn-primary" id="sendbtn">嗖嗖嗖</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <!-- This script forces textarea content to be sent after 'enter' is pressed -->
    <script type="text/javascript" src="textarea.js"></script>
    <!-- This script manages sockets and form submiting -->
    <script type="text/javascript" src="index.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js" integrity="sha256-oj52qvIP5c7N6lZZoh9z3OYacAIOjsROAcZBHUaJMyw=" crossorigin="anonymous"></script>
</body>


</html>
